<template>
  <!-- 放置一个图标 -->
  <div>
    <svg-icon :icon-class="isFullScreen? 'exit-fullscreen': 'fullscreen'" class="fullscreen" @click="switchFull" />
  </div>
</template>

<script>
// 实现全屏逻辑
// 思路：取反操作 如果当前是全屏模式 点击按钮就退出全屏 如果当前是非全屏模式 点击就开启全屏

// esc问题：监控一下当前用户是否点击了esc退出键 如果它点击了 手动修改isFullScreen为false
export default {
  name: 'ScreenFull',
  data() {
    return {
      isFullScreen: false // true全屏  false非全屏
    }
  },
  mounted() {
    document.addEventListener('fullscreenchange', () => {
      // 获取当前是否为全屏模式
      const isFull = document.fullscreenElement
      // 如果当前点击了esc 代表已经退出了全屏 isFull null
      if (!isFull) {
        this.isFullScreen = false
      }
    })
  },
  methods: {
    switchFull() {
      if (this.isFullScreen) {
        // 退出全屏
        document.exitFullscreen()
      } else {
        // 开启全屏
        document.documentElement.requestFullscreen()
      }
      // 把状态取反
      this.isFullScreen = !this.isFullScreen
    }
  }
}
</script>

<style lang="scss" scoped>
.fullscreen {
  width: 20px;
  height: 20px;
  cursor: pointer;
  margin-right: 20px;
}
</style>
